﻿<%@ Page Title="Coastal Climbing - Walls" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Walls.aspx.cs" Inherits="CoastalClimbing.Walls" %>
<%@ OutputCache Duration="30" VaryByParam="f" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script type="text/javascript">
        function swapImage(img, id) {
            if (document.images) {
                var url = "http://www.coastalclimbing.com/Images/" + img;
                
                $("#" + id).attr("src", url);
            }
        }

        function resetImage() {
            swapImage("blank.jpg", "imgID");
        }

        function resetUpstairsImage() {
            swapImage("blank_upstairs.png", "imgID2");
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<h1><asp:Literal ID="litClimbingWall" runat="server" /> Climbing Walls</h1>    
    <a href="Routes.aspx" class="yellowLink">To view all of the routes click here!</a>
    <br />
    <br />
    <asp:Panel ID="pnlDownstairs" runat="server">
        <img id="imgID" name="imgWalls" src="http://www.coastalclimbing.com/Images/blank.jpg" width="800" height="377" border="0" alt="Coastal Climbing Downstairs Wall" usemap="#imgMap" />    
        <map name="imgMap" title="Coastal Climbing Downstairs Walls">        
            <area shape="poly" coords="85,188,78,213,229,258,239,234," href="Wall.aspx?id=C432DDD7-A774-4704-8859-8E378D7DD503" alt="10 degree wall" onmouseover="javascript:swapImage('10degree.jpg', 'imgID');" onmouseout="javascript:resetImage();" />
            <area shape="poly" coords="85,49,75,79,276,83,288,50," href="Wall.aspx?id=DBE624D1-F711-451C-A4F6-8F075535BB25" alt="20 degree wall" onmouseover="javascript:swapImage('20degree.jpg', 'imgID');" onmouseout="javascript:resetImage();" />
            <area shape="poly" coords="543,50,523,143,738,143,740,47," href="Wall.aspx?id=9A12B63B-ABB0-4F57-AC90-B9B37A716D98" alt="30 degree wall" onmouseover="javascript:swapImage('30degree.jpg', 'imgID');" onmouseout="javascript:resetImage();" />
            <area shape="poly" coords="287,48,248,197,364,197,393,50," href="Wall.aspx?id=1244CD80-54B7-4088-B337-2E350B9D2181" alt="45 degree wall" onmouseover="javascript:swapImage('45degree.jpg', 'imgID');" onmouseout="javascript:resetImage();" />
            <area shape="poly" coords="742,48,742,143,666,167,713,251,724,255,753,154,753,47," href="Wall.aspx?id=35C3DB7C-1359-4B29-AC25-362987B6A155" alt="90 degree wall" onmouseover="javascript:swapImage('90degree.jpg', 'imgID');" onmouseout="javascript:resetImage();" />
            <area shape="poly" coords="724,255,545,210,535,254,596,258,580,319,617,327,643,242,723,265," href="Wall.aspx?id=AF9F9F44-C163-4CF7-9C60-46BE97AA62DA" alt="Arete wall" onmouseover="javascript:swapImage('arete.jpg', 'imgID');" onmouseout="javascript:resetImage();" />
            <area shape="poly" coords="390,48,376,142,526,143,540,47," href="Wall.aspx?id=3F75F407-FDF8-48FD-AB69-54E2A79E9E9E" alt="Warped wall" onmouseover="javascript:swapImage('warped.jpg', 'imgID');" onmouseout="javascript:resetImage();" />
            <area shape="poly" coords="47,177,38,204,76,211,87,189," href="#" alt="Campus board" onmouseover="javascript:swapImage('campus.jpg', 'imgID');" onmouseout="javascript:resetImage();" />
        </map>
    </asp:Panel>
    <asp:Panel ID="pnlUpstairs" runat="server">
        <img id="imgID2" name="imgWallUpstairs" src="http://www.coastalclimbing.com/Images/blank_upstairs.png" width="1170" height="270" border="0" alt="Coastal Climbing Upstairs Wall" usemap="#imgMapUpstairs" />    
        <map name="imgMapUpstairs" title="Coastal Climbing Upstairs Walls">        
            <area shape="poly" coords="832,85,1089,86,1089,124,1129,124,1096,254,941,258,797,208" href="Wall.aspx?id=90776A46-4D56-4157-8AFE-D60948B4F50F" alt="Deep cave" onmouseover="javascript:swapImage('deepcave.png', 'imgID2');" onmouseout="javascript:resetUpstairsImage();" />
            <area shape="poly" coords="127,268,129,262,288,215,794,210,939,257,1094,257,1091,269" href="Wall.aspx?id=9ADFFC4D-E099-43F1-8C84-22FF06D16E6A" alt="Eye wall" onmouseover="javascript:swapImage('eye.png', 'imgID2');" onmouseout="javascript:resetUpstairsImage();" />
            <area shape="poly" coords="99,0,95,10,322,8,392,30,538,29,618,8,877,8,877,0" href="Wall.aspx?id=FBCE35B8-2348-4B1C-8885-E61BEABB9B3C" alt="Traverse wall" onmouseover="javascript:swapImage('traverse.png', 'imgID2');" onmouseout="javascript:resetUpstairsImage();" />            
        </map>
    </asp:Panel>
    <br />
    <br />
     <asp:Chart ID="chtRoutes" runat="server" Width="800" Height="400">
        <Series>
            <asp:Series Name="Routes" ChartType="Bar" ChartArea="MainChartArea" Palette="EarthTones"></asp:Series>
        </Series>
        <ChartAreas>
            <asp:ChartArea Name="MainChartArea">                            
            </asp:ChartArea>
        </ChartAreas>
    </asp:Chart>     
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">

</asp:Content>
